<template>
  <el-row>
    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
      <div class="all">
        <ul>
          <li v-for="i in initial" :key="i.id" @click="selectIn(i)" :class="{active:initialName.name == i.name}">
            {{i.name}}
          </li>
        </ul>

        <ul>
          <li v-for="i in type" :key="i.id" @click="selectTy(i)" :class="{active:typeName.name == i.name}">
            {{i.name}}
          </li>
        </ul>

        <ul>
          <li v-for="i in area" :key="i.id" @click="selectAr(i)" :class="{active:areaName.name == i.name}">
            {{i.name}}
          </li>
        </ul>
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "Indexes",
  data() {
    return {
      initial: [{ id: -1, name: "热门" }, { id: "A", name: "A" }, { id: "B", name: "B" }, { id: "C", name: "C" }, { id: "D", name: "D" },
      { id: "E", name: "E" }, { id: "F", name: "F" }, { id: "G", name: "G" }, { id: "H", name: "H" }, { id: "I", name: "I" },
      { id: "J", name: "J" }, { id: "K", name: "K" }, { id: "L", name: "L" }, { id: "M", name: "M" }, { id: "N", name: "N" },
      { id: "O", name: "O" }, { id: "P", name: "P" }, { id: "Q", name: "Q" }, { id: "R", name: "R" }, { id: "S", name: "S" },
      { id: "T", name: "T" }, { id: "U", name: "U" }, { id: "V", name: "V" }, { id: "W", name: "W" }, { id: "X", name: "X" },
      { id: "Y", name: "Y" }, { id: "Z", name: "Z" }, { id: "#", name: "#" }],
      type: [{ id: -1, name: "全部" }, { id: 1, name: "男歌手" }, { id: 2, name: "女歌手" }, { id: 3, name: "组合/乐队" }],
      area: [{ id: -1, name: "全部" }, { id: 7, name: "华语" }, { id: 96, name: "欧美" }, { id: 8, name: "日本" }, { id: 16, name: "韩国" }, { id: 0, name: "其他" }],

      initialName: { id: -1, name: "热门" },
      typeName: { id: -1, name: "全部" },
      areaName: { id: -1, name: "全部" },
    }
  },
  created() {
    this.getSongerAll();
  },
  methods: {
    selectIn(i) {
      if (this.initialName != i) {
        this.initialName = i;
        this.getSongerAll();
      }
    },
    selectTy(i) {
      if (this.typeName != i) {
        this.typeName = i;
        this.getSongerAll();
      }
    },
    selectAr(i) {
      if (this.areaName != i) {
        this.areaName = i;
        this.getSongerAll();
      }
    },
    getSongerAll() {
      this.$emit("getSonger", 0, 60, this.initialName.id, this.typeName.id, this.areaName.id);
    }
  },
}
</script>

<style scoped>
.all ul {
  list-style-type: none;
  clear: both;
  padding-bottom: 40px;
}
.all ul li {
  float: left;
  margin-left: 5px;
  cursor: pointer;
  padding: 5px 10px 5px 10px;
}
.all ul li:hover {
  color: RGB(64, 158, 255);
}
.active {
  color: RGB(2555, 255, 255);
  background-color: RGB(100, 189, 255);
}
</style>